<template>
  <div class="welcome-wrapper">
    <div class="welcome"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Welcome',
  data() {
    return {
      loading: null,
    }
  },
  computed: {
    ...mapGetters(['permission_routes']),
  },
  watch: {
    permission_routes: {
      handler(newR, oldR) {
        const authMenu = newR.filter(item => { return !item.hidden })
        console.log('permission_routes', authMenu);
        if (authMenu.length) {
          const item = authMenu[authMenu.length - 1];
          if (item.children && item.children.length) {
            this.$router.push(`${item.path}/${item.children[item.children.length - 1].path}`)
          } else {
            this.$router.push(authMenu[authMenu.length - 1].path)
          }
        } else {
          this.$router.push('/404');
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.loading = this.$loading({
      lock: true,
      text: 'welcome',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },
  destroyed() {
    this.loading.close();
  },
}
</script>

<style lang="scss">
.welcome-wrapper {
  height: 100%;
}
</style>